<template>
  <div style="width:100%;box-sizing: border-box;over-flow:hidden">
    <bcd-top title="会员中心" englishtitle="VIP CENTER" />
    <div class="login_form" :style="$store.getters.screenWidth ? 'padding:0' : ''">
      <div class="login_from_part">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="50px">
          <el-form-item
            prop="username"
            :rules="[
      { required: true, message: '请输入账号', trigger: 'blur' }
    ]"
          >
            <el-input v-model="dynamicValidateForm.username" placeholder="用户名/邮箱/手机号"></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="{
      required: true, message: '密码不能为空', trigger: 'blur'
    }"
          >
            <el-input v-model="dynamicValidateForm.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item
            prop="savecode"
            :rules="{
      required: true, message: '验证码不能为空', trigger: 'blur'
    }"
          >
            <el-input style="height:43px" v-model="dynamicValidateForm.savecode" placeholder="验证码">
              <template slot="prepend">
                <i class="el-icon-chat-line-round"></i>
              </template>
              <template slot="append">
                <div class="get_code"  @click="drawCode()" id="code">
                  <canvas width="90" height="35" id="verifyCanvas"></canvas>
                  <img id="code_img" />
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              @click="submitForm('dynamicValidateForm')"
              size="middle"
              type="primary"
            >登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              size="middle"
              style="background:rgb(87, 199, 212);border:none"
              type="primary"
              @click="toReg"
            >没有账号现在去注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <footer-part></footer-part>
  </div>
</template>

<script>
import footerPart from "../views/footer";
import { login ,bindingWeixin} from "../api/api";
import bcdTop from "../components/bcdTop";

// import store from '../store'
export default {
  components: {
    footerPart,
    bcdTop
  },
  data() {
    return {
      dynamicValidateForm: {
        password: "",
        username: "",
        savecode: ""
      },
      loading: false,
      str: "",
      nums: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "0",
       
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z"
      ]
    };
  },
  created() {
    this.drawCode();
  },
  mounted() {
    this.drawCode();
  },
  methods: {
    toReg() {
      this.$router.push("/register");
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          if (this.dynamicValidateForm.savecode != this.str) {
            this.$notify.error({
              title: "错误",
              message: "验证码不正确"
            });
            return;
          }
          this.loading = true;
          let data = await login(this.dynamicValidateForm);
          console.log(data.data);

          if (data.data.success == false) {
            this.$notify.error({
              title: "错误",
              message: data.data.errorMessage
            });
          } else {
            this.$notify({
              title: "登录成功！",
              message: `欢迎用户${data.data.username}！`,
              type: "success"
            });
            this.$store.commit("settoekn", data.data.token);
            this.$store.commit("setname", data.data.username);
            this.$store.commit("setUserId", data.data.userId);
            this.$router.push("/index");
          }

          this.loading = false;
        } else {
          console.log("error submit!!");
          this.loading = false;
          return false;
        }
      });
    },
    drawCode() {
      console.log("重新绘制");
      document.getElementById("verifyCanvas").remove(); //每次更新验证码都要移除canvas，然后再进行重绘
      var box = document.getElementById("code");
      var p1 = document.getElementById("code_img");
      var p0 = document.createElement("canvas"); //创建canvas节点
      p0.id = "verifyCanvas"; //定义canvas id

      box.insertBefore(p0, p1); //将canvas节点插入到img节点前面
      p0.width = 90; //设置画布宽度
      p0.height = 35; //设置画布高度
      var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
      var context = canvas.getContext("2d"); //获取画布2D上下文环境
      context.fillStyle = "#fff"; //画布填充色
      context.fillRect(0, 0, canvas.width, canvas.height); //清空画布
      context.fillStyle = "#800000"; //设置字体颜色
      context.font = "25px Arial"; //设置字体
      var rand = new Array();
      var x = new Array();
      var y = new Array();
      for (var i = 0; i < 4; i++) {
        rand.push(rand[i]);
        rand[i] = this.nums[Math.floor(Math.random() * this.nums.length)]; //在数组中随机取一个值
        x[i] = i * 20 + 10;
        y[i] = Math.random() * 20 + 16;
        context.fillText(rand[i], x[i], y[i]); //设置文本在画布中显示的位置
      }
      this.str = rand.join(""); //将验证码的值中小写字母转为大写
      console.log("this.sete",rand)
      //画3条随机线
      for (var p = 0; p < 3; p++) {
        this.drawline(canvas, context);
      }

      // 画30个随机点
      for (var j = 0; j < 30; j++) {
        this.drawDot(canvas, context);
      }
      this.convertCanvasToImage(canvas);
      console.log("验证码的值", this.str);
      return this.str;
    },
    // 随机线
    drawline(canvas, context) {
      context.moveTo(
        Math.floor(Math.random() * canvas.width),
        Math.floor(Math.random() * canvas.height)
      ); //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
      context.lineTo(
        Math.floor(Math.random() * canvas.width),
        Math.floor(Math.random() * canvas.height)
      ); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
      context.lineWidth = 0.5; //随机线宽
      context.strokeStyle = "rgba(50,50,50,0.3)"; //随机线描边属性
      context.stroke(); //描边，即起点描到终点
    },
    // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
    drawDot(canvas, context) {
      var px = Math.floor(Math.random() * canvas.width);
      var py = Math.floor(Math.random() * canvas.height);
      context.moveTo(px, py);
      context.lineTo(px + 1, py + 1);
      context.lineWidth = 0.2;
      context.stroke();
    },
    // 绘制图片
    convertCanvasToImage(canvas) {
      document.getElementById("verifyCanvas").style.display = "none";
      var image = document.getElementById("code_img");
      image.src = canvas.toDataURL("image/png"); //画布转成图片地址
      return image; //返回图片对象
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
   height:43px!important;
}

</style>
<style lang="scss" >
.login_form {
  width: 100%;
  box-sizing: border-box;
  .el-button {
    width: 100%;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
  width: 100%;
  max-height: 991px;
  background: #efefef;
  padding: 50px 30px;
  display: flex;
  justify-content: center;
  .login_from_part {
    width: 400px;
    padding: 30px;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>